import { Skeleton, Spin } from "antd"
import hljs from "highlight.js"
import { Marked, marked } from "marked"
import { markedHighlight } from "marked-highlight"
import React, { memo, Suspense, useEffect, useMemo, useRef } from "react"

const reactmark = new Marked(
  markedHighlight({
    langPrefix: "hljs language-",
    highlight(code, lang, info) {
      const language = hljs.getLanguage(lang) ? lang : "plaintext"
      return hljs.highlight(code, { language }).value
    }
  })
)
type parseMarktoHtmlProps = {
  content: string
  isEnd?: boolean
  isMax?: boolean
}
const parseMarktoHtml = memo(
  ({ content, isEnd, isMax }: parseMarktoHtmlProps) => {
    const htmlStr = useRef<HTMLDivElement>(null)
    const hemlContent = useMemo(() => (content! ? content : ""), [content])
    const end = useMemo(() => isEnd, [isEnd])
    const max = useMemo(() => isMax, [isMax])
    useEffect(() => {
      ;(async function () {
        htmlStr.current.innerHTML = await reactmark.parse(hemlContent)
        if (!end && htmlStr.current && max) {
          htmlStr.current.lastElementChild &&
            htmlStr.current.lastElementChild.setAttribute(
              "class",
              "underline-shirlink"
            )
        }

        // console.log(str)
      })()
    }, [hemlContent])

    return (
      <>
        <div className={"w-full box-border relative "} ref={htmlStr}></div>
      </>
    )
  }
)

export default parseMarktoHtml
